<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>生日快乐蛋糕</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Concert+One|Pacifico');

        .mobile {
            position: fixed;
            text-align: center;
            width: 100%;
            top: 50px;
            font-size: 90px;
            display: block;
        }

        h1,
        h2,
        span {
            display: none;
        }

        @media screen and (min-width: 670px) {
            .mobile {
                display: none;
            }

            h1,
            h2,
            span {
                display: block;
            }

            body {
                background: linear-gradient(to right,
                        #e2b8f7,
                        #d4bafa,
                        #c7bcfb,
                        #b9befb,
                        #acbff9);
                cursor: crosshair;
                perspective: 1000px;
                transform-style: preserve-3d;
                font-family: 'Pacifico', cursive;
            }

            h1 {
                position: fixed;
                text-align: center;
                width: 100%;
                top: 120px;
                font-size: 90px;
                background: -webkit-linear-gradient(0deg, #ceadfc 0%, #a3bbfb 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-family: 'Concert One', cursive;
                font-weight: 400;
                z-index: -1;
                letter-spacing: 6px;
            }

            span {
                position: fixed;
                text-align: center;
                width: 100%;
                top: 70px;
                font-size: 70px;
            }

            h2 {
                position: fixed;
                text-align: center;
                width: 100%;
                top: 50px;
                font-size: 90px;
                background: -webkit-linear-gradient(90deg, #e9e6ff 0%, white 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            bokeh {
                position: fixed;
                width: 2vmin;
                height: 2vmin;
                border-radius: 50%;
                animation-name: explosion;
                animation-iteration-count: infinite;
                animation-direction: reverse;
                animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
            }

            bokeh:nth-child(1) {
                background-color: #feff28;
                transform: translate(19.7487583923vw, 68.7688324071vh);
                animation-duration: 4.1621369934s;
                animation-delay: -1.1404253238s;
            }

            bokeh:nth-child(2) {
                background-color: #ef8d22;
                transform: translate(23.4996200544vw, 2.0070198256vh);
                animation-duration: 3.5204801756s;
                animation-delay: -0.0278958817s;
            }

            bokeh:nth-child(3) {
                background-color: #ef8d22;
                transform: translate(16.5241588768vw, 83.0279453552vh);
                animation-duration: 3.2579376403s;
                animation-delay: -2.9270554568s;
            }

            bokeh:nth-child(4) {
                background-color: #feff28;
                transform: translate(79.835313456vw, 61.3696587429vh);
                animation-duration: 4.6841343778s;
                animation-delay: -2.2921418792s;
            }

            bokeh:nth-child(5) {
                background-color: #ef8d22;
                transform: translate(40.5122157446vw, 55.6832889992vh);
                animation-duration: 4.8106170989s;
                animation-delay: -1.9024592644s;
            }

            bokeh:nth-child(6) {
                background-color: #2bd8ff;
                transform: translate(78.9582353749vw, 35.6907977583vh);
                animation-duration: 2.7550153077s;
                animation-delay: -0.1447982256s;
            }

            bokeh:nth-child(7) {
                background-color: #feff28;
                transform: translate(40.2806606891vw, 40.0989445475vh);
                animation-duration: 2.6364696808s;
                animation-delay: -4.5021717027s;
            }

            bokeh:nth-child(8) {
                background-color: #fc85e1;
                transform: translate(32.5298827351vw, 19.1463895184vh);
                animation-duration: 4.6434577161s;
                animation-delay: -1.5830591359s;
            }

            bokeh:nth-child(9) {
                background-color: #feff28;
                transform: translate(36.5492378015vw, 38.8275679632vh);
                animation-duration: 2.0302242884s;
                animation-delay: -3.0643159083s;
            }

            bokeh:nth-child(10) {
                background-color: #ef8d22;
                transform: translate(6.0971127082vw, 65.8207720619vh);
                animation-duration: 3.9039181547s;
                animation-delay: -0.6974662311s;
            }

            bokeh:nth-child(11) {
                background-color: #ef8d22;
                transform: translate(1.4471104895vw, 29.1637596937vh);
                animation-duration: 4.9783430275s;
                animation-delay: -4.6856304151s;
            }

            bokeh:nth-child(12) {
                background-color: #feff28;
                transform: translate(30.7771259838vw, 65.8699362086vh);
                animation-duration: 4.9300884405s;
                animation-delay: -4.5662443232s;
            }

            bokeh:nth-child(13) {
                background-color: #fc85e1;
                transform: translate(87.1708570217vw, 79.3181278973vh);
                animation-duration: 4.8408594965s;
                animation-delay: -0.7852745459s;
            }

            bokeh:nth-child(14) {
                background-color: #2bd8ff;
                transform: translate(22.2022745923vw, 32.079254011vh);
                animation-duration: 3.42667487s;
                animation-delay: -1.282121786s;
            }

            bokeh:nth-child(15) {
                background-color: #feff28;
                transform: translate(16.0561286067vw, 95.3597486897vh);
                animation-duration: 2.9863714704s;
                animation-delay: -3.5699225006s;
            }

            bokeh:nth-child(16) {
                background-color: #feff28;
                transform: translate(39.4614787314vw, 38.9789042267vh);
                animation-duration: 4.1948762204s;
                animation-delay: -3.119509982s;
            }

            bokeh:nth-child(17) {
                background-color: #2bd8ff;
                transform: translate(55.9113885373vw, 40.9135262628vh);
                animation-duration: 4.0493765904s;
                animation-delay: -3.2559677235s;
            }

            bokeh:nth-child(18) {
                background-color: #2bd8ff;
                transform: translate(94.644322226vw, 42.6327730614vh);
                animation-duration: 3.2844326314s;
                animation-delay: -1.4301641507s;
            }

            bokeh:nth-child(19) {
                background-color: #2bd8ff;
                transform: translate(74.1892495025vw, 11.3339334596vh);
                animation-duration: 3.8230639335s;
                animation-delay: -0.2652368206s;
            }

            bokeh:nth-child(20) {
                background-color: #2bd8ff;
                transform: translate(28.2091705855vw, 77.0718583355vh);
                animation-duration: 2.7177701075s;
                animation-delay: -4.8659646542s;
            }

            bokeh:nth-child(21) {
                background-color: #feff28;
                transform: translate(22.8827957342vw, 52.6605715384vh);
                animation-duration: 4.0386973866s;
                animation-delay: -2.7639208145s;
            }

            bokeh:nth-child(22) {
                background-color: #fc85e1;
                transform: translate(22.6731821053vw, 79.8077369569vh);
                animation-duration: 4.2020937097s;
                animation-delay: -3.7669347028s;
            }

            bokeh:nth-child(23) {
                background-color: #2bd8ff;
                transform: translate(41.3572357075vw, 86.8368388644vh);
                animation-duration: 4.6263169081s;
                animation-delay: -2.3110135086s;
            }

            bokeh:nth-child(24) {
                background-color: #fc85e1;
                transform: translate(52.9977193643vw, 35.6180567535vh);
                animation-duration: 2.2201592228s;
                animation-delay: -2.9241215352s;
            }

            bokeh:nth-child(25) {
                background-color: #2bd8ff;
                transform: translate(73.4315256117vw, 72.882778441vh);
                animation-duration: 4.670241315s;
                animation-delay: -2.948299534s;
            }

            bokeh:nth-child(26) {
                background-color: #2bd8ff;
                transform: translate(56.4846001904vw, 0.0547648758vh);
                animation-duration: 4.3443344879s;
                animation-delay: -0.9839999543s;
            }

            bokeh:nth-child(27) {
                background-color: #fc85e1;
                transform: translate(58.6080213546vw, 97.8854852192vh);
                animation-duration: 3.455048346s;
                animation-delay: -0.0926306891s;
            }

            bokeh:nth-child(28) {
                background-color: #fc85e1;
                transform: translate(66.2757947757vw, 51.0294171601vh);
                animation-duration: 4.9188534572s;
                animation-delay: -1.783995705s;
            }

            bokeh:nth-child(29) {
                background-color: #2bd8ff;
                transform: translate(40.2757362887vw, 87.1011519874vh);
                animation-duration: 2.9922198988s;
                animation-delay: -1.5645133571s;
            }

            bokeh:nth-child(30) {
                background-color: #feff28;
                transform: translate(3.5575242655vw, 3.626507111vh);
                animation-duration: 2.019062641s;
                animation-delay: -0.8599979544s;
            }

            bokeh:nth-child(31) {
                background-color: #2bd8ff;
                transform: translate(14.2790241513vw, 60.440112914vh);
                animation-duration: 3.982023033s;
                animation-delay: -2.2562558952s;
            }

            bokeh:nth-child(32) {
                background-color: #2bd8ff;
                transform: translate(76.2566782296vw, 41.1222476103vh);
                animation-duration: 2.4203964011s;
                animation-delay: -0.7342436515s;
            }

            bokeh:nth-child(33) {
                background-color: #feff28;
                transform: translate(80.392729993vw, 5.8057152197vh);
                animation-duration: 4.0493934498s;
                animation-delay: -2.7207858382s;
            }

            bokeh:nth-child(34) {
                background-color: #feff28;
                transform: translate(5.6920339835vw, 66.3691040971vh);
                animation-duration: 2.0487549203s;
                animation-delay: -4.7625990913s;
            }

            bokeh:nth-child(35) {
                background-color: #fc85e1;
                transform: translate(30.0444532395vw, 16.540987546vh);
                animation-duration: 3.4594643482s;
                animation-delay: -1.2457867924s;
            }

            bokeh:nth-child(36) {
                background-color: #fc85e1;
                transform: translate(53.4999197815vw, 57.4759826489vh);
                animation-duration: 3.1827399124s;
                animation-delay: -4.184127529s;
            }

            bokeh:nth-child(37) {
                background-color: #fc85e1;
                transform: translate(97.6811256884vw, 56.845685561vh);
                animation-duration: 4.926579918s;
                animation-delay: -3.0103307639s;
            }

            bokeh:nth-child(38) {
                background-color: #ef8d22;
                transform: translate(87.750541551vw, 78.665651621vh);
                animation-duration: 2.2924470397s;
                animation-delay: -3.1302961377s;
            }

            bokeh:nth-child(39) {
                background-color: #feff28;
                transform: translate(62.1082695837vw, 96.4034798391vh);
                animation-duration: 4.5082608735s;
                animation-delay: -0.6123907855s;
            }

            bokeh:nth-child(40) {
                background-color: #ef8d22;
                transform: translate(20.6037934825vw, 97.8421790032vh);
                animation-duration: 3.6746383609s;
                animation-delay: -3.3801477252s;
            }

            bokeh:nth-child(41) {
                background-color: #ef8d22;
                transform: translate(99.5154848632vw, 78.3679987217vh);
                animation-duration: 3.7459162361s;
                animation-delay: -2.159978866s;
            }

            bokeh:nth-child(42) {
                background-color: #feff28;
                transform: translate(94.6052178441vw, 4.1617714713vh);
                animation-duration: 3.1000621244s;
                animation-delay: -0.9727027423s;
            }

            bokeh:nth-child(43) {
                background-color: #feff28;
                transform: translate(20.2929093036vw, 18.7052188166vh);
                animation-duration: 2.7531107762s;
                animation-delay: -4.0930239814s;
            }

            bokeh:nth-child(44) {
                background-color: #feff28;
                transform: translate(95.9472576915vw, 86.8976158976vh);
                animation-duration: 2.0705171273s;
                animation-delay: -0.7446992358s;
            }

            bokeh:nth-child(45) {
                background-color: #2bd8ff;
                transform: translate(65.0251014703vw, 53.4672818998vh);
                animation-duration: 3.5021199045s;
                animation-delay: -1.831355889s;
            }

            bokeh:nth-child(46) {
                background-color: #ef8d22;
                transform: translate(47.2804669584vw, 61.9638787209vh);
                animation-duration: 3.047766952s;
                animation-delay: -3.1679882994s;
            }

            bokeh:nth-child(47) {
                background-color: #2bd8ff;
                transform: translate(70.3808928277vw, 61.5759922344vh);
                animation-duration: 2.5285571878s;
                animation-delay: -4.0480467677s;
            }

            bokeh:nth-child(48) {
                background-color: #2bd8ff;
                transform: translate(78.2278247542vw, 26.4899379656vh);
                animation-duration: 4.4038390909s;
                animation-delay: -4.2077537478s;
            }

            bokeh:nth-child(49) {
                background-color: #feff28;
                transform: translate(80.906706554vw, 0.7294385367vh);
                animation-duration: 3.4707688213s;
                animation-delay: -4.4153336396s;
            }

            bokeh:nth-child(50) {
                background-color: #fc85e1;
                transform: translate(50.4487297741vw, 67.7939584948vh);
                animation-duration: 2.3029131843s;
                animation-delay: -0.8488223681s;
            }

            bokeh:nth-child(51) {
                background-color: #fc85e1;
                transform: translate(95.2772768731vw, 83.4726928684vh);
                animation-duration: 3.5105509703s;
                animation-delay: -3.6624592143s;
            }

            bokeh:nth-child(52) {
                background-color: #ef8d22;
                transform: translate(87.7949242305vw, 35.266084814vh);
                animation-duration: 4.0691894434s;
                animation-delay: -0.2118914576s;
            }

            bokeh:nth-child(53) {
                background-color: #feff28;
                transform: translate(62.2887826309vw, 28.6091998088vh);
                animation-duration: 3.3755038872s;
                animation-delay: -2.3344154932s;
            }

            bokeh:nth-child(54) {
                background-color: #ef8d22;
                transform: translate(25.1807041491vw, 49.0150099118vh);
                animation-duration: 3.0453717917s;
                animation-delay: -4.2472326691s;
            }

            bokeh:nth-child(55) {
                background-color: #ef8d22;
                transform: translate(58.0388675173vw, 76.8497755276vh);
                animation-duration: 2.8497095453s;
                animation-delay: -1.4264832558s;
            }

            bokeh:nth-child(56) {
                background-color: #ef8d22;
                transform: translate(2.8368461354vw, 58.11107909vh);
                animation-duration: 2.9538238387s;
                animation-delay: -0.9240352616s;
            }

            bokeh:nth-child(57) {
                background-color: #ef8d22;
                transform: translate(13.0814986727vw, 29.4585031031vh);
                animation-duration: 2.5919443414s;
                animation-delay: -3.3981131484s;
            }

            bokeh:nth-child(58) {
                background-color: #2bd8ff;
                transform: translate(47.0962279324vw, 6.6332793651vh);
                animation-duration: 3.8901104161s;
                animation-delay: -4.5548590098s;
            }

            bokeh:nth-child(59) {
                background-color: #feff28;
                transform: translate(6.9900971018vw, 1.3870295073vh);
                animation-duration: 4.8917973277s;
                animation-delay: -3.0107668415s;
            }

            bokeh:nth-child(60) {
                background-color: #2bd8ff;
                transform: translate(7.4196602371vw, 50.8749989384vh);
                animation-duration: 3.1294080997s;
                animation-delay: -2.251562814s;
            }

            bokeh:nth-child(61) {
                background-color: #fc85e1;
                transform: translate(11.0920385594vw, 99.4334474002vh);
                animation-duration: 3.6617001656s;
                animation-delay: -0.6860699141s;
            }

            bokeh:nth-child(62) {
                background-color: #feff28;
                transform: translate(98.458117622vw, 16.3890685156vh);
                animation-duration: 3.6560617732s;
                animation-delay: -0.9334960846s;
            }

            bokeh:nth-child(63) {
                background-color: #fc85e1;
                transform: translate(18.9132512291vw, 89.788557894vh);
                animation-duration: 3.8915061199s;
                animation-delay: -1.5036684468s;
            }

            bokeh:nth-child(64) {
                background-color: #feff28;
                transform: translate(75.8320758249vw, 85.8080061465vh);
                animation-duration: 3.6757496327s;
                animation-delay: -2.7317088063s;
            }

            bokeh:nth-child(65) {
                background-color: #feff28;
                transform: translate(22.129816709vw, 17.3956307009vh);
                animation-duration: 3.9482288464s;
                animation-delay: -4.0919645764s;
            }

            bokeh:nth-child(66) {
                background-color: #feff28;
                transform: translate(44.3275000586vw, 28.5187043433vh);
                animation-duration: 3.1234151381s;
                animation-delay: -0.816850809s;
            }

            bokeh:nth-child(67) {
                background-color: #2bd8ff;
                transform: translate(60.1740489891vw, 71.7188072057vh);
                animation-duration: 2.005824034s;
                animation-delay: -4.8995931755s;
            }

            bokeh:nth-child(68) {
                background-color: #feff28;
                transform: translate(16.9848804347vw, 82.621297131vh);
                animation-duration: 2.223285647s;
                animation-delay: -3.059299311s;
            }

            bokeh:nth-child(69) {
                background-color: #ef8d22;
                transform: translate(57.6996020152vw, 45.6753249879vh);
                animation-duration: 3.1495445444s;
                animation-delay: -1.6518445369s;
            }

            bokeh:nth-child(70) {
                background-color: #2bd8ff;
                transform: translate(57.7245398295vw, 97.3646033153vh);
                animation-duration: 3.2609565274s;
                animation-delay: -0.7136378957s;
            }

            bokeh:nth-child(71) {
                background-color: #feff28;
                transform: translate(9.7871170872vw, 93.1484644648vh);
                animation-duration: 4.14902851s;
                animation-delay: -3.2543528069s;
            }

            bokeh:nth-child(72) {
                background-color: #ef8d22;
                transform: translate(55.0714355829vw, 20.5485657059vh);
                animation-duration: 2.1382767088s;
                animation-delay: -3.2749298797s;
            }

            bokeh:nth-child(73) {
                background-color: #feff28;
                transform: translate(79.5960163925vw, 3.7821002455vh);
                animation-duration: 3.059368346s;
                animation-delay: -4.9228702108s;
            }

            bokeh:nth-child(74) {
                background-color: #fc85e1;
                transform: translate(18.5425312769vw, 96.7015532193vh);
                animation-duration: 3.3751695198s;
                animation-delay: -2.7518225047s;
            }

            bokeh:nth-child(75) {
                background-color: #ef8d22;
                transform: translate(68.13228963vw, 20.7522455715vh);
                animation-duration: 2.3144999169s;
                animation-delay: -0.1255465523s;
            }

            bokeh:nth-child(76) {
                background-color: #2bd8ff;
                transform: translate(4.0821338488vw, 31.8994634766vh);
                animation-duration: 3.4646893095s;
                animation-delay: -4.7742300321s;
            }

            bokeh:nth-child(77) {
                background-color: #2bd8ff;
                transform: translate(98.2271077883vw, 2.7210624524vh);
                animation-duration: 3.3587160908s;
                animation-delay: -4.435769073s;
            }

            bokeh:nth-child(78) {
                background-color: #ef8d22;
                transform: translate(82.4434608256vw, 9.0962389017vh);
                animation-duration: 3.8483414715s;
                animation-delay: -1.0694782347s;
            }

            bokeh:nth-child(79) {
                background-color: #2bd8ff;
                transform: translate(98.2654136151vw, 83.7523655632vh);
                animation-duration: 4.1419003986s;
                animation-delay: -1.9764953981s;
            }

            bokeh:nth-child(80) {
                background-color: #fc85e1;
                transform: translate(86.7186358745vw, 73.0676367298vh);
                animation-duration: 2.4890966331s;
                animation-delay: -0.4741379874s;
            }

            bokeh:nth-child(81) {
                background-color: #fc85e1;
                transform: translate(15.3220485202vw, 36.9832128128vh);
                animation-duration: 3.995407162s;
                animation-delay: -3.7744457779s;
            }

            bokeh:nth-child(82) {
                background-color: #feff28;
                transform: translate(91.6146273919vw, 40.6444773891vh);
                animation-duration: 2.1658998309s;
                animation-delay: -1.952373995s;
            }

            bokeh:nth-child(83) {
                background-color: #feff28;
                transform: translate(25.6507399106vw, 43.4526845177vh);
                animation-duration: 3.4409697042s;
                animation-delay: -2.0030107798s;
            }

            bokeh:nth-child(84) {
                background-color: #fc85e1;
                transform: translate(42.0976572753vw, 43.2568667967vh);
                animation-duration: 2.3101567464s;
                animation-delay: -1.7491800647s;
            }

            bokeh:nth-child(85) {
                background-color: #ef8d22;
                transform: translate(70.35369149vw, 35.0193717674vh);
                animation-duration: 2.8018140781s;
                animation-delay: -2.439169514s;
            }

            bokeh:nth-child(86) {
                background-color: #ef8d22;
                transform: translate(63.0514820087vw, 94.1690725709vh);
                animation-duration: 3.7603555112s;
                animation-delay: -2.2458160432s;
            }

            bokeh:nth-child(87) {
                background-color: #ef8d22;
                transform: translate(30.8923658633vw, 6.1507988452vh);
                animation-duration: 3.8603200439s;
                animation-delay: -2.2815024243s;
            }

            bokeh:nth-child(88) {
                background-color: #fc85e1;
                transform: translate(88.3652364239vw, 15.9016862067vh);
                animation-duration: 2.2632380234s;
                animation-delay: -4.9912290306s;
            }

            bokeh:nth-child(89) {
                background-color: #fc85e1;
                transform: translate(88.5809851234vw, 70.911010903vh);
                animation-duration: 4.075252974s;
                animation-delay: -2.3664757556s;
            }

            bokeh:nth-child(90) {
                background-color: #fc85e1;
                transform: translate(0.4140375379vw, 50.2727784599vh);
                animation-duration: 4.6181858911s;
                animation-delay: -3.6503385874s;
            }

            bokeh:nth-child(91) {
                background-color: #fc85e1;
                transform: translate(29.9299546482vw, 82.5719171401vh);
                animation-duration: 2.1286725696s;
                animation-delay: -2.3161439203s;
            }

            bokeh:nth-child(92) {
                background-color: #2bd8ff;
                transform: translate(58.350640452vw, 29.9499317658vh);
                animation-duration: 2.4821674613s;
                animation-delay: -1.6987795836s;
            }

            bokeh:nth-child(93) {
                background-color: #ef8d22;
                transform: translate(50.642476245vw, 68.3125043281vh);
                animation-duration: 2.0229683575s;
                animation-delay: -4.2234322223s;
            }

            bokeh:nth-child(94) {
                background-color: #fc85e1;
                transform: translate(58.7261528871vw, 65.2390476803vh);
                animation-duration: 4.1995893273s;
                animation-delay: -4.2561744278s;
            }

            bokeh:nth-child(95) {
                background-color: #feff28;
                transform: translate(71.7778667804vw, 41.6143362726vh);
                animation-duration: 4.4884534009s;
                animation-delay: -2.1482949406s;
            }

            bokeh:nth-child(96) {
                background-color: #fc85e1;
                transform: translate(54.0176292023vw, 78.8198774625vh);
                animation-duration: 4.3541682522s;
                animation-delay: -3.1668881397s;
            }

            bokeh:nth-child(97) {
                background-color: #2bd8ff;
                transform: translate(68.0969777674vw, 16.1002280533vh);
                animation-duration: 3.1599695314s;
                animation-delay: -0.8484943973s;
            }

            bokeh:nth-child(98) {
                background-color: #ef8d22;
                transform: translate(87.1953943864vw, 18.8625214541vh);
                animation-duration: 4.0572958901s;
                animation-delay: -2.8562307683s;
            }

            bokeh:nth-child(99) {
                background-color: #ef8d22;
                transform: translate(11.9162542977vw, 31.5767108025vh);
                animation-duration: 4.4056687995s;
                animation-delay: -2.6596195011s;
            }

            bokeh:nth-child(100) {
                background-color: #ef8d22;
                transform: translate(64.6990433218vw, 2.5228218889vh);
                animation-duration: 4.7936838759s;
                animation-delay: -2.1647212067s;
            }

            @keyframes explosion {
                0% {
                    opacity: 0;
                }

                70% {
                    opacity: 1;
                }

                100% {
                    transform: translate(50vw, 100vh);
                }
            }

            .cake {
                position: relative;
                top: 250px;
                margin: auto;
                width: 200px;
                height: 60px;
                background: #f9fdff;
                border-radius: 100%;
                transform: translateZ(100px);
                box-shadow: 0px 4px 0px #f4f9fd, 0px 8px 0px #dba9ff,
                    0px 12px 0px #fec3b3, 0px 16px 0px #f7f6fb, 0px 20px 0px #f7f6fb,
                    0px 24px 0px #f7f6fb, 0px 28px 0px #f7f6fb, 0px 32px 0px #fea0bb,
                    0px 36px 0px #fea0bb, 0px 40px 0px #9cef9d, 0px 44px 0px #9cef9d,
                    0px 48px 0px #f7f6fb, 0px 52px 0px #f7f6fb, 0px 56px 0px #f7f6fb,
                    0px 60px 0px #f7f6fb, 0px 64px 0px #f7f6fb, 0px 68px 0px #dfa5fc,
                    0px 72px 0px #dfa5fc, 0px 76px 0px #fafffe, 0px 80px 0px #fafffe;
            }

            .plate {
                position: absolute;
                height: 90px;
                width: 300px;
                bottom: -95px;
                left: 50%;
                top: 380px;
                margin-left: -150px;
                border-radius: 100%;
                background: radial-gradient(ellipse closest-side at center,
                        #08c7fe 0%,
                        #04d7f2 71%,
                        #02ffd0 100%);
                box-shadow: 0px 3px 0px #00e2e1, 0px 6px 0px #00d3fb;
                transform: translateZ(80px);
            }

            .candle {
                position: relative;
                height: 50px;
                width: 12px;
                top: 280px;
                margin: auto;
                background: linear-gradient(0deg, #b7f4a7 0%, white 100%);
                border-radius: 4px;
                transform: translateZ(120px);
            }

            #flame {
                position: absolute;
                z-index: 10;
            }

            .lit {
                background: linear-gradient(to bottom, #fff6d9, #fbc36c);
                width: 15px;
                height: 35px;
                /*  Info on border radius. http://www.css3.info/preview/rounded-border/ */
                border-top-left-radius: 10px 35px;
                border-top-right-radius: 10px 35px;
                border-bottom-right-radius: 10px 10px;
                border-bottom-left-radius: 10px 10px;
                top: -34px;
                margin: auto;
                /*   http://www.css3.info/preview/box-shadow/ */
                box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
                transform-origin: bottom;
                animation: flicker 1s ease-in-out alternate infinite;
            }

            @keyframes flicker {
                0% {
                    transform: skewX(5deg);
                    box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
                }

                25% {
                    transform: skewX(-5deg);
                    box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
                }

                50% {
                    transform: skewX(10deg);
                    box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
                }

                75% {
                    transform: skewX(-10deg);
                    box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
                }

                100% {
                    transform: skewX(5deg);
                    box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
                }
            }

            .pyro>.before,
            .pyro>.after {
                position: fixed;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
                    0 0 #fff, 0 0 #fff, 0 0 #fff;
                -moz-animation: 1s bang ease-out infinite backwards,
                    1s gravity ease-in infinite backwards,
                    5s position linear infinite backwards;
                -webkit-animation: 1s bang ease-out infinite backwards,
                    1s gravity ease-in infinite backwards,
                    5s position linear infinite backwards;
                -o-animation: 1s bang ease-out infinite backwards,
                    1s gravity ease-in infinite backwards,
                    5s position linear infinite backwards;
                -ms-animation: 1s bang ease-out infinite backwards,
                    1s gravity ease-in infinite backwards,
                    5s position linear infinite backwards;
                animation: 1s bang ease-out infinite backwards,
                    1s gravity ease-in infinite backwards,
                    5s position linear infinite backwards;
            }

            .pyro>.after {
                -moz-animation-delay: 1.25s, 1.25s, 1.25s;
                -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
                -o-animation-delay: 1.25s, 1.25s, 1.25s;
                -ms-animation-delay: 1.25s, 1.25s, 1.25s;
                animation-delay: 1.25s, 1.25s, 1.25s;
                -moz-animation-duration: 1.25s, 1.25s, 6.25s;
                -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
                -o-animation-duration: 1.25s, 1.25s, 6.25s;
                -ms-animation-duration: 1.25s, 1.25s, 6.25s;
                animation-duration: 1.25s, 1.25s, 6.25s;
            }

            @-webkit-keyframes bang {
                to {
                    box-shadow: -116px 70.3333333333px #ff9500,
                        -249px -169.6666666667px #00ff44, -89px -194.6666666667px #ff001e,
                        222px 31.3333333333px #00ff66, -69px -384.6666666667px #ff1e00,
                        -145px -198.6666666667px #ddff00, 13px -60.6666666667px #fff700,
                        -131px -339.6666666667px #ff00a6, -161px 39.3333333333px #00ff1e,
                        -8px -97.6666666667px #5500ff, -6px 39.3333333333px aqua,
                        13px -179.6666666667px #6aff00, 202px -265.6666666667px #ff00ee,
                        -216px -115.6666666667px red, 168px 80.3333333333px #008cff,
                        -144px -42.6666666667px #0080ff, -206px -272.6666666667px #99ff00,
                        60px -278.6666666667px #ff00ea, 114px -338.6666666667px #ff008c,
                        -44px -81.6666666667px #ffc800, 75px -7.6666666667px #00ff66,
                        -7px -226.6666666667px #00ffbb, -88px -313.6666666667px #3c00ff,
                        142px -319.6666666667px #ff0044, -135px -242.6666666667px #0d00ff,
                        103px -303.6666666667px #ff6600, 234px -34.6666666667px #c800ff,
                        224px -354.6666666667px #ff00c8, -87px -15.6666666667px #00ffe1,
                        232px 38.3333333333px #a200ff, 226px -144.6666666667px #002fff,
                        160px 63.3333333333px #ff000d, 211px -305.6666666667px yellow,
                        -167px -42.6666666667px #6a00ff, -232px 49.3333333333px #ff1a00,
                        115px -242.6666666667px #ff00cc, 36px -362.6666666667px #4400ff,
                        160px -136.6666666667px #ff0022, 6px -316.6666666667px #ff7b00,
                        238px 47.3333333333px #ff0066, 221px -320.6666666667px #3700ff,
                        181px -414.6666666667px #4800ff, 226px 46.3333333333px #77ff00,
                        -159px -366.6666666667px #ff005e, 13px -177.6666666667px #ff00b3,
                        -110px -232.6666666667px #ffee00, 42px -396.6666666667px #5500ff,
                        154px -407.6666666667px #ff0077, 131px -19.6666666667px #0084ff,
                        179px -254.6666666667px #002fff, -226px -31.6666666667px #4d00ff;
                }
            }

            @-moz-keyframes bang {
                to {
                    box-shadow: -116px 70.3333333333px #ff9500,
                        -249px -169.6666666667px #00ff44, -89px -194.6666666667px #ff001e,
                        222px 31.3333333333px #00ff66, -69px -384.6666666667px #ff1e00,
                        -145px -198.6666666667px #ddff00, 13px -60.6666666667px #fff700,
                        -131px -339.6666666667px #ff00a6, -161px 39.3333333333px #00ff1e,
                        -8px -97.6666666667px #5500ff, -6px 39.3333333333px aqua,
                        13px -179.6666666667px #6aff00, 202px -265.6666666667px #ff00ee,
                        -216px -115.6666666667px red, 168px 80.3333333333px #008cff,
                        -144px -42.6666666667px #0080ff, -206px -272.6666666667px #99ff00,
                        60px -278.6666666667px #ff00ea, 114px -338.6666666667px #ff008c,
                        -44px -81.6666666667px #ffc800, 75px -7.6666666667px #00ff66,
                        -7px -226.6666666667px #00ffbb, -88px -313.6666666667px #3c00ff,
                        142px -319.6666666667px #ff0044, -135px -242.6666666667px #0d00ff,
                        103px -303.6666666667px #ff6600, 234px -34.6666666667px #c800ff,
                        224px -354.6666666667px #ff00c8, -87px -15.6666666667px #00ffe1,
                        232px 38.3333333333px #a200ff, 226px -144.6666666667px #002fff,
                        160px 63.3333333333px #ff000d, 211px -305.6666666667px yellow,
                        -167px -42.6666666667px #6a00ff, -232px 49.3333333333px #ff1a00,
                        115px -242.6666666667px #ff00cc, 36px -362.6666666667px #4400ff,
                        160px -136.6666666667px #ff0022, 6px -316.6666666667px #ff7b00,
                        238px 47.3333333333px #ff0066, 221px -320.6666666667px #3700ff,
                        181px -414.6666666667px #4800ff, 226px 46.3333333333px #77ff00,
                        -159px -366.6666666667px #ff005e, 13px -177.6666666667px #ff00b3,
                        -110px -232.6666666667px #ffee00, 42px -396.6666666667px #5500ff,
                        154px -407.6666666667px #ff0077, 131px -19.6666666667px #0084ff,
                        179px -254.6666666667px #002fff, -226px -31.6666666667px #4d00ff;
                }
            }

            @-o-keyframes bang {
                to {
                    box-shadow: -116px 70.3333333333px #ff9500,
                        -249px -169.6666666667px #00ff44, -89px -194.6666666667px #ff001e,
                        222px 31.3333333333px #00ff66, -69px -384.6666666667px #ff1e00,
                        -145px -198.6666666667px #ddff00, 13px -60.6666666667px #fff700,
                        -131px -339.6666666667px #ff00a6, -161px 39.3333333333px #00ff1e,
                        -8px -97.6666666667px #5500ff, -6px 39.3333333333px aqua,
                        13px -179.6666666667px #6aff00, 202px -265.6666666667px #ff00ee,
                        -216px -115.6666666667px red, 168px 80.3333333333px #008cff,
                        -144px -42.6666666667px #0080ff, -206px -272.6666666667px #99ff00,
                        60px -278.6666666667px #ff00ea, 114px -338.6666666667px #ff008c,
                        -44px -81.6666666667px #ffc800, 75px -7.6666666667px #00ff66,
                        -7px -226.6666666667px #00ffbb, -88px -313.6666666667px #3c00ff,
                        142px -319.6666666667px #ff0044, -135px -242.6666666667px #0d00ff,
                        103px -303.6666666667px #ff6600, 234px -34.6666666667px #c800ff,
                        224px -354.6666666667px #ff00c8, -87px -15.6666666667px #00ffe1,
                        232px 38.3333333333px #a200ff, 226px -144.6666666667px #002fff,
                        160px 63.3333333333px #ff000d, 211px -305.6666666667px yellow,
                        -167px -42.6666666667px #6a00ff, -232px 49.3333333333px #ff1a00,
                        115px -242.6666666667px #ff00cc, 36px -362.6666666667px #4400ff,
                        160px -136.6666666667px #ff0022, 6px -316.6666666667px #ff7b00,
                        238px 47.3333333333px #ff0066, 221px -320.6666666667px #3700ff,
                        181px -414.6666666667px #4800ff, 226px 46.3333333333px #77ff00,
                        -159px -366.6666666667px #ff005e, 13px -177.6666666667px #ff00b3,
                        -110px -232.6666666667px #ffee00, 42px -396.6666666667px #5500ff,
                        154px -407.6666666667px #ff0077, 131px -19.6666666667px #0084ff,
                        179px -254.6666666667px #002fff, -226px -31.6666666667px #4d00ff;
                }
            }

            @-ms-keyframes bang {
                to {
                    box-shadow: -116px 70.3333333333px #ff9500,
                        -249px -169.6666666667px #00ff44, -89px -194.6666666667px #ff001e,
                        222px 31.3333333333px #00ff66, -69px -384.6666666667px #ff1e00,
                        -145px -198.6666666667px #ddff00, 13px -60.6666666667px #fff700,
                        -131px -339.6666666667px #ff00a6, -161px 39.3333333333px #00ff1e,
                        -8px -97.6666666667px #5500ff, -6px 39.3333333333px aqua,
                        13px -179.6666666667px #6aff00, 202px -265.6666666667px #ff00ee,
                        -216px -115.6666666667px red, 168px 80.3333333333px #008cff,
                        -144px -42.6666666667px #0080ff, -206px -272.6666666667px #99ff00,
                        60px -278.6666666667px #ff00ea, 114px -338.6666666667px #ff008c,
                        -44px -81.6666666667px #ffc800, 75px -7.6666666667px #00ff66,
                        -7px -226.6666666667px #00ffbb, -88px -313.6666666667px #3c00ff,
                        142px -319.6666666667px #ff0044, -135px -242.6666666667px #0d00ff,
                        103px -303.6666666667px #ff6600, 234px -34.6666666667px #c800ff,
                        224px -354.6666666667px #ff00c8, -87px -15.6666666667px #00ffe1,
                        232px 38.3333333333px #a200ff, 226px -144.6666666667px #002fff,
                        160px 63.3333333333px #ff000d, 211px -305.6666666667px yellow,
                        -167px -42.6666666667px #6a00ff, -232px 49.3333333333px #ff1a00,
                        115px -242.6666666667px #ff00cc, 36px -362.6666666667px #4400ff,
                        160px -136.6666666667px #ff0022, 6px -316.6666666667px #ff7b00,
                        238px 47.3333333333px #ff0066, 221px -320.6666666667px #3700ff,
                        181px -414.6666666667px #4800ff, 226px 46.3333333333px #77ff00,
                        -159px -366.6666666667px #ff005e, 13px -177.6666666667px #ff00b3,
                        -110px -232.6666666667px #ffee00, 42px -396.6666666667px #5500ff,
                        154px -407.6666666667px #ff0077, 131px -19.6666666667px #0084ff,
                        179px -254.6666666667px #002fff, -226px -31.6666666667px #4d00ff;
                }
            }

            @keyframes bang {
                to {
                    box-shadow: -116px 70.3333333333px #ff9500,
                        -249px -169.6666666667px #00ff44, -89px -194.6666666667px #ff001e,
                        222px 31.3333333333px #00ff66, -69px -384.6666666667px #ff1e00,
                        -145px -198.6666666667px #ddff00, 13px -60.6666666667px #fff700,
                        -131px -339.6666666667px #ff00a6, -161px 39.3333333333px #00ff1e,
                        -8px -97.6666666667px #5500ff, -6px 39.3333333333px aqua,
                        13px -179.6666666667px #6aff00, 202px -265.6666666667px #ff00ee,
                        -216px -115.6666666667px red, 168px 80.3333333333px #008cff,
                        -144px -42.6666666667px #0080ff, -206px -272.6666666667px #99ff00,
                        60px -278.6666666667px #ff00ea, 114px -338.6666666667px #ff008c,
                        -44px -81.6666666667px #ffc800, 75px -7.6666666667px #00ff66,
                        -7px -226.6666666667px #00ffbb, -88px -313.6666666667px #3c00ff,
                        142px -319.6666666667px #ff0044, -135px -242.6666666667px #0d00ff,
                        103px -303.6666666667px #ff6600, 234px -34.6666666667px #c800ff,
                        224px -354.6666666667px #ff00c8, -87px -15.6666666667px #00ffe1,
                        232px 38.3333333333px #a200ff, 226px -144.6666666667px #002fff,
                        160px 63.3333333333px #ff000d, 211px -305.6666666667px yellow,
                        -167px -42.6666666667px #6a00ff, -232px 49.3333333333px #ff1a00,
                        115px -242.6666666667px #ff00cc, 36px -362.6666666667px #4400ff,
                        160px -136.6666666667px #ff0022, 6px -316.6666666667px #ff7b00,
                        238px 47.3333333333px #ff0066, 221px -320.6666666667px #3700ff,
                        181px -414.6666666667px #4800ff, 226px 46.3333333333px #77ff00,
                        -159px -366.6666666667px #ff005e, 13px -177.6666666667px #ff00b3,
                        -110px -232.6666666667px #ffee00, 42px -396.6666666667px #5500ff,
                        154px -407.6666666667px #ff0077, 131px -19.6666666667px #0084ff,
                        179px -254.6666666667px #002fff, -226px -31.6666666667px #4d00ff;
                }
            }

            @-webkit-keyframes gravity {
                to {
                    transform: translateY(200px);
                    -moz-transform: translateY(200px);
                    -webkit-transform: translateY(200px);
                    -o-transform: translateY(200px);
                    -ms-transform: translateY(200px);
                    opacity: 0;
                }
            }

            @-moz-keyframes gravity {
                to {
                    transform: translateY(200px);
                    -moz-transform: translateY(200px);
                    -webkit-transform: translateY(200px);
                    -o-transform: translateY(200px);
                    -ms-transform: translateY(200px);
                    opacity: 0;
                }
            }

            @-o-keyframes gravity {
                to {
                    transform: translateY(200px);
                    -moz-transform: translateY(200px);
                    -webkit-transform: translateY(200px);
                    -o-transform: translateY(200px);
                    -ms-transform: translateY(200px);
                    opacity: 0;
                }
            }

            @-ms-keyframes gravity {
                to {
                    transform: translateY(200px);
                    -moz-transform: translateY(200px);
                    -webkit-transform: translateY(200px);
                    -o-transform: translateY(200px);
                    -ms-transform: translateY(200px);
                    opacity: 0;
                }
            }

            @keyframes gravity {
                to {
                    transform: translateY(200px);
                    -moz-transform: translateY(200px);
                    -webkit-transform: translateY(200px);
                    -o-transform: translateY(200px);
                    -ms-transform: translateY(200px);
                    opacity: 0;
                }
            }

            @-webkit-keyframes position {

                0%,
                19.9% {
                    margin-top: 10%;
                    margin-left: 40%;
                }

                20%,
                39.9% {
                    margin-top: 40%;
                    margin-left: 30%;
                }

                40%,
                59.9% {
                    margin-top: 20%;
                    margin-left: 70%;
                }

                60%,
                79.9% {
                    margin-top: 30%;
                    margin-left: 20%;
                }

                80%,
                99.9% {
                    margin-top: 30%;
                    margin-left: 80%;
                }
            }

            @-moz-keyframes position {

                0%,
                19.9% {
                    margin-top: 10%;
                    margin-left: 40%;
                }

                20%,
                39.9% {
                    margin-top: 40%;
                    margin-left: 30%;
                }

                40%,
                59.9% {
                    margin-top: 20%;
                    margin-left: 70%;
                }

                60%,
                79.9% {
                    margin-top: 30%;
                    margin-left: 20%;
                }

                80%,
                99.9% {
                    margin-top: 30%;
                    margin-left: 80%;
                }
            }

            @-o-keyframes position {

                0%,
                19.9% {
                    margin-top: 10%;
                    margin-left: 40%;
                }

                20%,
                39.9% {
                    margin-top: 40%;
                    margin-left: 30%;
                }

                40%,
                59.9% {
                    margin-top: 20%;
                    margin-left: 70%;
                }

                60%,
                79.9% {
                    margin-top: 30%;
                    margin-left: 20%;
                }

                80%,
                99.9% {
                    margin-top: 30%;
                    margin-left: 80%;
                }
            }

            @-ms-keyframes position {

                0%,
                19.9% {
                    margin-top: 10%;
                    margin-left: 40%;
                }

                20%,
                39.9% {
                    margin-top: 40%;
                    margin-left: 30%;
                }

                40%,
                59.9% {
                    margin-top: 20%;
                    margin-left: 70%;
                }

                60%,
                79.9% {
                    margin-top: 30%;
                    margin-left: 20%;
                }

                80%,
                99.9% {
                    margin-top: 30%;
                    margin-left: 80%;
                }
            }

            @keyframes position {

                0%,
                19.9% {
                    margin-top: 10%;
                    margin-left: 40%;
                }

                20%,
                39.9% {
                    margin-top: 40%;
                    margin-left: 30%;
                }

                40%,
                59.9% {
                    margin-top: 20%;
                    margin-left: 70%;
                }

                60%,
                79.9% {
                    margin-top: 30%;
                    margin-left: 20%;
                }

                80%,
                99.9% {
                    margin-top: 30%;
                    margin-left: 80%;
                }
            }
        }
    </style>
</head>

<body>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <div class="mobile">Open in desktop</div>
    <div class="pyro">
        <div class="before"></div>
        <div class="after"></div>
    </div>

    <h2>Happy Birthday</h2>
    <span>🎉</span>
    <div class="candle">
        <div id="flame" class="lit"></div>
    </div>

    <div class="cake"></div>
    <div class="plate"></div>
    <!-- partial -->
</body>

</html>